<!DOCTYPE html>
<html ng-app="App">
<head>
    <meta charset="UTF-8">
    <title>RealLifeRPG Launcher</title>

    <style>
        #app {
            display: none;
        }
    </style>
    <!-- angular -->
    <script src="node_modules/angular/angular.js"></script>
    <script src="node_modules/angular-tooltips/dist/angular-tooltips.min.js"></script>
    <link href="node_modules/angular-tooltips/dist/angular-tooltips.min.css" rel="stylesheet">

    <!-- tether -->
    <link href="node_modules/tether/dist/css/tether.min.css" rel="stylesheet">
    <script src="node_modules/tether/dist/js/tether.min.js"></script>

    <!-- shepherd -->
    <link href="node_modules/tether-shepherd/dist/css/shepherd-theme-square-dark.css" rel="stylesheet">

    <!-- jquery -->
    <script type="text/javascript">
        window.$ = window.jQuery = require('./resources/jquery/jquery-1.12.3.min.js');
    </script>

    <!-- bootstrap -->
    <link ng-href="resources/bootstrap/css/bootstrap_{{theme}}.min.css" rel="stylesheet">
    <script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>

    <!-- fa icons-->
    <link rel="stylesheet" href="node_modules/font-awesome/css/font-awesome.min.css">

    <!-- chartjs -->
    <script src="node_modules/chart.js/dist/Chart.min.js"></script>

    <!-- shepherd -->
    <link rel="stylesheet" href="node_modules/tether-shepherd/dist/css/shepherd-theme-square.css"/>
    <script src="node_modules/tether-shepherd/dist/js/shepherd.min.js"></script>
    <script src="node_modules/tether-shepherd/dist/js/tether.js"></script>

    <!-- alertify -->
    <script src="node_modules/alertify/lib/alertify.min.js"></script>
    <!-- include the core styles -->
    <link rel="stylesheet" href="resources/css/alertify.core.css"/>

    <!-- perfect-scrollbar -->
    <script src="node_modules/perfect-scrollbar/dist/js/perfect-scrollbar.jquery.min.js"></script>
    <link rel="stylesheet" href="node_modules/perfect-scrollbar/dist/css/perfect-scrollbar.min.css">

    <link href="node_modules/icheck/skins/minimal/minimal.css" rel="stylesheet">

    <!-- leaflet -->
    <link rel="stylesheet" href="node_modules/leaflet/dist/leaflet.css">

    <!-- custom css/js -->
    <link rel="stylesheet" href="resources/css/custom.css">

    <script type="text/javascript" src="app/require.js"></script>

    <script type="text/javascript" src="index.js"></script>
    <script type="text/javascript" src="app/controllers/aboutCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/changelogCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/mapCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/modCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/navbarCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/playerCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/serverCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/settingsCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/tfarCtrl.js"></script>
    <script type="text/javascript" src="app/controllers/twitchCtrl.js"></script>
</head>
<body>
<div id="app">
    <nav class="navbar navbar-default navbar-fixed-top">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" href="https://realliferpg.de/">ReallifeRPG Launcher</a>
            </div>

            <div ng-controller="navbarCtrl" class="collapse navbar-collapse" id="bs-navbar-collapse">
                <ul class="nav navbar-nav">
                    <li ng-repeat="tab in tabs" ng-class={'active':(slide==$index)} class="{{tab.tag}}" on-finish-render="ngRepeatFinished">
                        <a ng-click="switchSlide(tab)" title="{{tab.title}}"><span class="{{tab.icon}}"></span></a>
                    </li>
                    <li class="dropdown">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">ReallifeRPG <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a href="https://realliferpg.de" target="_blank">Website</a></li>
                            <li><a href="https://forum.realliferpg.de" target="_blank">Forum</a></li>
                            <li><a href="https://wiki.realliferpg.de" target="_blank">Wiki</a></li>
                            <li class="divider"></li>
                            <li><a href="https://github.com/A3ReallifeRPG/" target="_blank">Github</a></li>
                        </ul>
                    </li>
                </ul>
                <ul class="nav navbar-nav navbar-right">
                    <p class="navbar-text" ng-show="logged_in"><img ng-src="{{player_data.avatar}}" height="31" width="31"></p>
                    <li class="dropdown" ng-show="logged_in">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">{{player_data.profilename}} <span class="caret"></span></a>
                        <ul class="dropdown-menu" role="menu">
                            <li><a ng-click="logout()">Logout</a></li>
                        </ul>
                    </li>
                    <li ng-show="!logged_in && logging_in">
                        <a class="updating"><img src="resources/loading/ring-alt.svg"></a>
                    </li>
                    <li>
                        <a ng-click="login()" ng-if="!logged_in && !logging_in" title="Login"><span class="glyphicon glyphicon-log-in"></span></a>
                    </li>
                    <li>
                        <a href="ts3server://ts.realliferpg.de?port=9987" title="Teamspeak"><i class="fa fa-microphone" aria-hidden="true"></i></a>
                    </li>
                    <li>
                        <a href="https://donate.realliferpg.de/" title="Spenden"><i class="fa fa-heart" aria-hidden="true"></i></a>
                    </li>
                    <li>
                        <a ng-click="tourApp()" title="Tutorial"><i class="fa fa-list-ul" aria-hidden="true"></i></a>
                    </li>
                    <li ng-show="update_ready">
                        <a ng-click="relaunchUpdate()" title="Launcher neustarten"><span class="glyphicon glyphicon-repeat"></span></a>
                    </li>
                    <li ng-show="updating">
                        <a class="updating" title="Update wird geladen"><img src="resources/loading/ring-alt.svg"></a>
                    </li>
                    <li ng-show="downloading && downSpeed">
                        <a><i class="fa fa-download" aria-hidden="true"></i> {{downSpeed}}/s</a>
                    </li>
                    <li ng-show="downloading && upSpeed">
                        <a><i class="fa fa-upload" aria-hidden="true"></i> {{upSpeed}}/s</a>
                    </li>
                    <li class="reloadTabBtn">
                        <a ng-click="refresh(true)" title="Inhalte neu laden"><span ng-class="reloadClass" class="glyphicon glyphicon-refresh"></span></a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>
    <div id="content" style="height: 100%" ng-cloak>
        <div id="carousel-main" class="carousel slide" data-ride="carousel" style="height: 100%" data-interval="false">
            <br>
            <br>
            <div class="carousel-inner" role="listbox">
                <div class="item active">
                    <div id="mods">
                        <div class="container">
                            <div ng-controller="modCtrl" data-ng-init="init()">
                                <h3>ReallifeRPG Mods</h3>
                                <hr>
                                <div class="page">
                                    <div class="row">
                                        <div class="col-lg-8" ng-show="loading">
                                            <div style="text-align: center">
                                                <img src="resources/loading/cube.svg"/>
                                            </div>
                                        </div>
                                        <div id="modScroll" class="col-lg-8 modScroll" style="position: relative">
                                            <div ng-show="!loading">
                                                <div class="row">
                                                    <div class="col-md-6" ng-repeat="mod in mods">
                                                        <div class="panel panel-primary">
                                                            <div class="panel-body" style="text-align: center">
                                                                <img ng-src="{{mod.ImageUrl}}" width="320px">
                                                                <hr>
                                                                <h4 tooltips tooltip-template="{{mod.Description}}">{{mod.Name}}</h4>
                                                                <hr>
                                                                <div class="btn-group btn-group-sm">
                                                                    <button class="btn btn-success btn-sm" ng-click="action(mod)" ng-disabled="downloading">{{mod.state[1]}}</button>
                                                                    <button class="btn btn-warning btn-sm" ng-show="mod.state[0] !== 0 && mod.HasGameFiles" ng-click="initHash(mod)" ng-disabled="downloading">Prüfen</button>
                                                                    <button class="btn btn-danger btn-sm" ng-show="mod.state[0] !== 0 && mod.HasGameFiles" ng-click="initBisignCheck(mod)" ng-disabled="downloading">Bisign</button>
                                                                    <button class="btn btn-primary btn-sm" ng-show="mod.state[0] === 3 && mod.HasGameFiles && mod.Torrent !== '' && mod.Torrent !== null" ng-disabled="downloading" ng-click="initTorrent(mod)"><i class="fa fa-upload" aria-hidden="true"></i> Seeden</button>
                                                                    <button class="btn btn-success btn-sm" ng-show="mod.state[0] !== 0 && mod.HasGameFiles" ng-click="openModDir(mod)"><span class=" glyphicon glyphicon-folder-open"></span></button>
                                                                    <button class="btn btn-success btn-sm" ng-show="mod.state[0] !== 0" ng-disabled="downloading || reloadDisabled" ng-click="refresh(true)"><span ng-class="reloadClass" class="glyphicon glyphicon-refresh"></span></button>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-lg-4">
                                            <ul class="list-group list-group-unbordered margin-none">
                                                <li class="list-group-item">
                                                    <b>Status</b> <a class="pull-right"><span tooltips tooltip-template="{{hint}}">{{state}}</span></a>
                                                </li>
                                                <li class="list-group-item" ng-if="downloading && downSpeed">
                                                    <b>Geschwindigkeit</b> <a class="pull-right"><span tooltips tooltip-template="Download Geschwindigkeit">{{downSpeed}}/s</span></a>
                                                </li>
                                                <li class="list-group-item" ng-if="totalProgress !== ''">
                                                    <b>Fortschritt</b> <a class="pull-right"><span tooltips tooltip-template="Gesamtfortschritt">{{totalProgress}} %</span></a>
                                                </li>
                                                <li class="list-group-item" ng-if="totalSize">
                                                    <b>Dateifortschritt</b> <a class="pull-right">{{totalDownloaded}}/{{totalSize}}</a>
                                                </li>
                                                <li class="list-group-item" ng-if="totalETA !== ''">
                                                    <b>Verbleibend</b> <a class="pull-right"><span tooltips tooltip-template="Zeit verbleibend">{{totalETA}}</span></a>
                                                </li>
                                                <li class="list-group-item" ng-if="maxConns > 0">
                                                    <b>Peers</b> <a class="pull-right">{{totalPeers}}/{{maxConns}}</a>
                                                </li>
                                                <li class="list-group-item" ng-if="fileName !== ''">
                                                    <b>Datei</b> <a class="pull-right">{{fileName}}</a>
                                                </li>
                                                <li class="list-group-item" ng-if="fileProgress > 0">
                                                    <div class="progress progress-striped active" style="margin-bottom: 0">
                                                        <div class="progress-bar progress-bar-success" style="width: {{fileProgress}}%"></div>
                                                    </div>
                                                </li>
                                            </ul>
                                            <button class="btn btn-danger pull-right btn-sm" style="margin-top: 10px" ng-if="downloading && canCancel" ng-click="cancel()"><span class="glyphicon glyphicon-remove"></span> Abbrechen</button>
                                            <br>
                                        </div>
                                    </div>
                                    <div class="row">
                                        <div class="col-md-12">
                                            <div ng-show="downloading">
                                                <canvas ng-show="downloading" id="bar-chart" width="1140" height="70"></canvas>
                                            </div>
                                            <hr>
                                            <div class="progress progress-striped active">
                                                <div class="progress-bar" style="width: {{totalProgress}}%"></div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="servers">
                        <div class="container">
                            <div class="row" ng-controller="serverCtrl" data-ng-init="init()">
                                <h3>ReallifeRPG Server</h3>
                                <hr>
                                <div class="page">
                                    <div style="text-align: center" ng-show="loading">
                                        <img src="resources/loading/cube.svg"/>
                                    </div>
                                    <ul class="nav nav-tabs">
                                        <li ng-class={active:(0==$index)} class="serverTab" id="serverTab{{server.Id}}" ng-repeat="server in servers">
                                            <a ng-click="showTab(server.Id)">{{server.Servername}} <span class="label label-success">{{server.Playercount}}/{{server.Slots}}</span></a>
                                        </li>
                                        <li class="serverTab pull-right" id="statisticsTab">
                                            <a ng-click="showStatistics()">Statistiken</a>
                                        </li>
                                    </ul>
                                    <br>
                                    <div class="tab-content">
                                        <div ng-class={active:(0==$index)} id="serverPane{{server.Id}}" class="tab-pane fade in serverPane" ng-repeat="server in servers">
                                            <div class="row">
                                                <div class="col-md-4">
                                                    <canvas ng-show="server.appId === 107410 && server.Gamemode === 1" id="serverChart{{server.Id}}" width="387" height="387"/>
                                                </div>
                                                <div class="col-md-4">
                                                    <div ng-show="server.Playercount != 0">
                                                        <h5>{{server.ListSide}} <i ng-click="sort(server)" tooltips tooltip-template="{{server.sortText}}" class="hover-underline cursor-pointer {{server.sortIcon}}"></i><span class="pull-right">{{server.PlayercountShow}}/{{server.Slots}}</span></h5>
                                                        <ul id="playerScroll{{server.Id}}" class="list-group list-group-unbordered margin-none" style="height: 350px;position: relative;">
                                                            <li class="list-group-item" ng-repeat="player in server.PlayersShow">
                                                                <b>{{player}}</b>
                                                            </li>
                                                        </ul>
                                                    </div>
                                                </div>
                                                <div class="col-md-4">
                                                    <h5>Daten <span class="pull-right"><span ng-if="!server.ping"><img tooltips tooltip-template="Versuche den Server zu pingen..." src="./resources/loading/ping-loading.svg"></span><span ng-if="server.ping" tooltips tooltip-template="Dein Ping zum Server">{{server.ping}} ms</span></span></h5>
                                                    <ul class="list-group list-group-unbordered margin-none">
                                                        <li class="list-group-item" ng-show="server.appId === 107410 && server.Gamemode === 1">
                                                            <b ng-class="server.ListSide === 'Zivilisten' ? 'underline' : ''" class="hover-underline cursor-pointer" ng-click="changePlayersList(server, 'Zivilisten')" tooltips tooltip-template="Nur Zivilisten zeigen">Zivilisten</b> <a class="pull-right"><span class="label label-civ">{{server.Civilians}}</span></a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.appId === 107410 && server.Gamemode === 1">
                                                            <b ng-class="server.ListSide === 'Polizisten' ? 'underline' : ''" class="hover-underline cursor-pointer" ng-click="changePlayersList(server, 'Polizisten')" tooltips tooltip-template="Nur Polizisten zeigen">Polizisten</b> <a class="pull-right"><span class="label label-cop">{{server.Cops}}</span></a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.appId === 107410 && server.Gamemode === 1">
                                                            <b ng-class="server.ListSide === 'Medics' ? 'underline' : ''" class="hover-underline cursor-pointer" ng-click="changePlayersList(server, 'Medics')" tooltips tooltip-template="Nur Medics zeigen">Medics</b> <a class="pull-right"><span class="label label-medic">{{server.Medics}}</span></a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.appId === 107410 && server.Gamemode === 1">
                                                            <b ng-class="server.ListSide === 'RAC' ? 'underline' : ''" class="hover-underline cursor-pointer" ng-click="changePlayersList(server, 'RAC')" tooltips tooltip-template="Nur RAC zeigen">RAC</b> <a class="pull-right"><span class="label label-adac">{{server.Adac}}</span></a>
                                                        </li>
                                                        <li class="list-group-item">
                                                            <b>IP:Port</b> <a ng-click="copyToClip(server)" tooltips tooltip-template="Kopieren" tooltip-class="pull-right" class="pull-right cursor-pointer">{{server.IpAddress}}:{{server.Port}}</a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.StartParameters !== '' && server.StartParameters.length < 20">
                                                            <b>Parameter</b> <a tooltips tooltip-template="Arma 3 Startparameter" tooltip-class="pull-right" class="pull-right">{{server.StartParameters}}</a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.ServerPassword !== ''">
                                                            <b>Passwort</b> <a tooltips tooltip-template="Arma 3 Server Passwort" tooltip-class="pull-right" class="pull-right">{{server.ServerPassword}}</a>
                                                        </li>
                                                        <li class="list-group-item">
                                                            <b>Letztes Update</b> <a ng-click="refresh(true)" tooltips tooltip-template="Updaten" tooltip-class="pull-right" class="pull-right cursor-pointer">{{server.last_update}}</a>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.Description !== '' && server.Description !== null">
                                                        </li>
                                                        <b ng-show="server.Description !== '' && server.Description !== null">Informationen</b>
                                                        <li class="list-group-item" ng-show="server.Description !== '' && server.Description !== null" ng-bind-html="server.DescriptionHTML">
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.StartParameters !== '' && server.StartParameters.length >= 20 && server.StartParameters.length <= 40">
                                                            <b>Parameter</b>
                                                        </li>
                                                        <li class="list-group-item" ng-show="server.StartParameters !== '' && server.StartParameters.length >= 20 && server.StartParameters.length <= 40">
                                                            <a>{{server.StartParameters}}</a>
                                                        </li>
                                                        <li class="list-group-item no-border-bottom"></li>
                                                    </ul>
                                                </div>
                                            </div>
                                            <form class="form-inline pull-right">
                                                <div class="form-group-sm">
                                                    <button type="button" class="btn btn-success btn-sm" ng-disabled="reloadDisabled" ng-click="refresh(true)"><span ng-class="reloadClass" class="glyphicon glyphicon-refresh" aria-hidden="true"></span> Aktualisieren</button>
                                                    <button ng-if="server.appId === 107410" type="button" class="btn btn-success btn-sm" ng-click="pingServer(server)"><i class="fa fa-wrench" aria-hidden="true"></i> Reparieren</button>
                                                    <label ng-if="profiles && server.appId === 107410">
                                                        <select class="form-control" ng-model="profiles.selected" ng-change="setProfile()" ng-options="profile for profile in profiles.available"></select>
                                                    </label>
                                                    <button type="button" class="btn btn-success btn-sm" ng-click="joinServer(server)"><i class="fa fa-play" aria-hidden="true"></i> Joinen</button>
                                                </div>
                                            </form>
                                        </div>
                                        <div id="statisticsPane" class="tab-pane fade in serverPane">
                                            <canvas id="statisticsGraph" height="450"></canvas>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="player">
                        <div class="container" ng-controller="playerCtrl" data-ng-init="init()">
                            <div class="page" style="height: 600px;">
                                <br>
                                <div style="text-align: center" ng-if="!logged_in">
                                    <div class="jumbotron">
                                        <h4>Dieser Schritt ist rein optional! <br> <br>Der Mod kann direkt heruntergeladen werden und diese Funktion ist erst verfügbar, wenn du einmal auf dem Server gewesen bist.</h4>
                                        <h4><a href="" ng-click="login()">Logge</a> dich oben rechts im Launcher mit deinem API Schlüssel aus dem <a href="https://info.realliferpg.de/">Infopanel</a> ein.</h4>
                                    </div>
                                    <img src="resources/img/api_key_showcase.png">
                                </div>
                                <div id="playerScroll" style="height: 550px;position: relative;">
                                    <div ng-if="logged_in">
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="panel panel-primary">
                                                    <div class="panel-heading">
                                                        <span data-hover="tooltip" title="" tooltips tooltip-template="Dein Ingame Name" tooltip-side="bottom">{{player_data.name}}</span>#<span tooltips tooltip-template="Deine ID" tooltip-side="bottom">{{player_data.id}}</span>
                                                        <span class="pull-right" tooltips tooltip-template="Dein Name auf Steam" tooltip-side="bottom" tooltip-class="pull-right">{{player_data.profilename}}</span>
                                                    </div>
                                                </div>
                                                <h4><span class="pull-left" tooltips tooltip-template="Dein aktuelles Level">{{player_data.level}}</span><span class="pull-right">{{player_data.level+ 1}}</span></h4>
                                                <div class="progress active" style="margin: auto;">
                                                    <div class="progress-bar progress-bar-striped progress-bar-info" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: {{player_data.level_progress}}%"></div>
                                                </div>
                                                <ul class="list-group list-group-unbordered margin-none">
                                                    <li class="list-group-item">
                                                        <b>PlayerID</b> <a class="pull-right" tooltips tooltip-template="Deine SteamID64" tooltip-class="pull-right">{{player_data.pid}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>BE GUID</b> <a class="pull-right" tooltips tooltip-template="Deine Battleye GUID" tooltip-class="pull-right">{{player_data.guid}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Zuletzt gesehen</b> <a class="pull-right" tooltips tooltip-template="Zu diesem Zeitpunkt warst du zuletzt Online" tooltip-class="pull-right">{{player_data.last_seen.date}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Bargeld</b> <a class="pull-right" tooltips tooltip-template="Dein Bargeld" tooltip-class="pull-right">${{player_data.cash_readable}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Bankaccount</b> <a class="pull-right" tooltips tooltip-template="Dein Bankaccount" tooltip-class="pull-right">${{player_data.bankacc_readable}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>XP</b> <a class="pull-right" tooltips tooltip-template="Deine XP" tooltip-class="pull-right">{{player_data.exp_readable}} XP</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Skillpunkte</b> <a class="pull-right" tooltips tooltip-template="Deine verfügbaren Skillpunkte" tooltip-class="pull-right">{{player_data.skillpoint}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Jail Time</b> <a class="pull-right" tooltips tooltip-template="Deine Restliche Zeit im Gefängnis" tooltip-class="pull-right">{{player_data.jail_time}}</a>
                                                    </li>
                                                    <li class="list-group-item">
                                                        <b>Position</b> <a class="pull-right">
                                                        <span ng-if="player_data.pos_free" class="label label-success" tooltips tooltip-template="Du kannst deine Position frei wählen!" tooltip-class="pull-right"><i class="fa fa-check" aria-hidden="true"></i> Frei</span>
                                                        <span ng-if="!player_data.pos_free" class="label label-info" tooltips tooltip-template="Du kannst deine Position nicht frei wählen!" tooltip-class="pull-right"><i class="fa fa-times" aria-hidden="true"></i> Gesperrt</span>
                                                    </a>
                                                    </li>
                                                </ul>
                                            </div>
                                            <div class="col-md-8">
                                                <ul class="nav nav-tabs">
                                                    <li class="active"><a href="#vehicles" data-toggle="tab" aria-expanded="false">Fahrzeuge</a></li>
                                                </ul>
                                                <div class="tab-pane fade in active" id="vehicles">
                                                    <table class="table table-striped table-hover">
                                                        <thead>
                                                        <tr>
                                                            <th>Name</th>
                                                            <th>Typ</th>
                                                            <th>Seite</th>
                                                            <th>Intakt</th>
                                                            <th>Aktiv</th>
                                                            <th>Sprit</th>
                                                        </tr>
                                                        </thead>
                                                        <tbody>
                                                        <tr role="row" class="odd" ng-repeat="vehicle in player_data.vehicles">
                                                            <td>
                                                                {{vehicle.vehicle_data.name}}
                                                            </td>
                                                            <td>
                                                                <i ng-if="vehicle.type === 'Car'" class="fa fa-car" aria-hidden="true"></i>
                                                                <i ng-if="vehicle.type === 'Air'" class="fa fa-plane" aria-hidden="true"></i>
                                                                <i ng-if="vehicle.type === 'Ship'" class="fa fa-ship" aria-hidden="true"></i>
                                                            </td>
                                                            <td>
                                                                <span ng-if="vehicle.side === 'WEST'" class="label label-info label-cop">Polizei</span>
                                                                <span ng-if="vehicle.side === 'CIV'" class="label label-info label-civ">Zivil</span>
                                                                <span ng-if="vehicle.side === 'EAST'" class="label label-info label-adac">RAC</span>
                                                                <span ng-if="vehicle.side === 'GUER'" class="label label-info label-medic">Medic</span>
                                                            </td>
                                                            <td>
                                                                <span ng-if="vehicle.alive" class="label label-success"><i class="fa fa-check" aria-hidden="true"></i></span>
                                                                <span ng-if="!vehicle.alive" class="label label-danger"><i class="fa fa-check" aria-hidden="true"></i></span>
                                                            </td>
                                                            <td>
                                                                <span ng-if="vehicle.impound" class="label label-warning"><i class="fa fa-times" aria-hidden="true"></i> Impounded</span>
                                                                <span ng-if="vehicle.active" class="label label-success"><i class="fa fa-check" aria-hidden="true"></i> Aktiv</span>
                                                                <span ng-if="!vehicle.active" class="label label-info"><i class="fa fa-times" aria-hidden="true"></i> Garage</span>
                                                            </td>
                                                            <td>
                                                                <div class="progress active" style="margin: auto;">
                                                                    <div ng-if="vehicle.fuel < 0.25" class="progress-bar progress-bar-striped  progress-bar-danger" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: {{vehicle.fuel * 100}}%"></div>
                                                                    <div ng-if="vehicle.fuel > 0.25 && vehicle.fuel < 0.75" class="progress-bar progress-bar-striped  progress-bar-warning" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: {{vehicle.fuel * 100}}%"></div>
                                                                    <div ng-if="vehicle.fuel > 0.75" class="progress-bar progress-bar-striped  progress-bar-success" role="progressbar" aria-valuenow="20" aria-valuemin="0" aria-valuemax="100" style="width: {{vehicle.fuel * 100}}%"></div>
                                                                </div>
                                                            </td>
                                                        </tr>
                                                        </tbody>
                                                        <tfoot>
                                                        <tr>
                                                            <th>Name</th>
                                                            <th>Typ</th>
                                                            <th>Seite</th>
                                                            <th>Intakt</th>
                                                            <th>Aktiv</th>
                                                            <th>Sprit</th>
                                                        </tr>
                                                        </tfoot>
                                                    </table>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="changelog">
                        <div class="container" ng-controller="changelogCtrl" data-ng-init="init()">
                            <h3>ReallifeRPG Changelog</h3>
                            <hr>
                            <div class="page">
                                <div class="row" id="changelogScroll" style="height: 450px;position: relative;">
                                    <div class="col-md-3">
                                        <div class="list-group">
                                            <a class="list-group-item" ng-repeat="changelog in changelogs" href="#{{changelog.id}}">{{changelog.version}} - {{changelog.release_at}}</a>
                                        </div>
                                    </div>
                                    <div class="col-md-9">
                                        <div class="panel-group" id="changelogAccordion">
                                            <div class="panel panel-default" ng-repeat="changelog in changelogs">
                                                <div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#changelogAccordion" data-target="#change{{changelog.id}}">
                                                    <h4 class="panel-title">
                                                        <span class="htop" id="{{changelog.id}}">Update {{changelog.version}}</span> <span class="pull-right">{{changelog.release_at}}</span>
                                                    </h4>
                                                </div>
                                                <div id="change{{changelog.id}}" class="panel-collapse collapse" style="height: 0;">
                                                    <div class="panel-body">
                                                        <div ng-if="changelog.change_mission.length">
                                                            <h4>Mission</h4>
                                                            <ul>
                                                                <li ng-repeat="content in changelog.change_mission">
                                                                    {{content}}
                                                                </li>
                                                            </ul>
                                                        </div>
                                                        <div ng-if="changelog.change_map.length">
                                                            <h4>Map</h4>
                                                            <ul>
                                                                <li ng-repeat="content in changelog.change_map">{{content}}</li>
                                                            </ul>
                                                        </div>
                                                        <div ng-if="changelog.change_mod.length">
                                                            <h4>Mod</h4>
                                                            <ul>
                                                                <li ng-repeat="content in changelog.change_mod">{{content}}</li>
                                                            </ul>
                                                        </div>
                                                        <code ng-if="changelog.note != ''">{{changelog.note}}</code>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="tfar">
                        <div class="container" ng-controller="tfarCtrl" data-ng-init="init()">
                            <h3>Task Force Arma Radio</h3>
                            <hr>
                            <div class="page">
                                <div class="row">
                                    <div class="col-md-10">
                                        Downloaded eine .ts3_plugin Datei und führt diese aus.
                                        <br>
                                        Teamspeak muss vor der Installation geschlossen werden.
                                        <br>
                                        <br>
                                        Schlägt die automatische Ausführung fehl, öffnet sich dein Download Ordner in dem du ein "ReallifeRPG" Verzeichnis mit dem Plugin findest.
                                        <br>
                                        Dieses muss dann manuell in den Teamspeak Ordner entpackt werden.
                                        <br>
                                        Du brauchst Hilfe oder etwas funktioniert nicht ? Melde dich im Support!
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-success pull-right" tooltips tooltip-template="Teamspeak 3.1.0.1+" ng-click="initFileDownload('ReallifeRPGTFAR_latest.ts3_plugin')">Plugin Download</button>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-10">
                                        Ein Teamspeak 3 Skin und Icon Pack im Stil von ReallifeRPG.
                                        <br>
                                        Downloaded eine .ts3_addon Datei und führt diese aus.
                                        <br>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-success pull-right" tooltips tooltip-template="Skin by Kaibu" ng-click="initFileDownload('ReallifeRPGSkin.ts3_addon')">Skin Download</button>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-10">
                                        Ein Teamspeak 3 Soundpack das unwichtige Sounds entfernt.
                                        <br>
                                        Tipp! Ihr könnt für einzelne Lesezeichen in Teamspeak einzelne Soundpacks zuweisen, so hört ihr auf anderen Teamspeaks weiterhin alles.
                                        <br>
                                    </div>
                                    <div class="col-md-2">
                                        <button class="btn btn-success pull-right" tooltips tooltip-template="Download" ng-click="initFileDownload('ReallifeRPG.ts3_soundpack')">Soundpack Download</button>
                                    </div>
                                </div>
                                <hr>
                                <div class="row" ng-show="fileDownloading">
                                    <div class="col-md-12">
                                        <div class="progress progress-striped active">
                                            <div class="progress-bar" style="width: {{fileProgress}}%"></div>
                                        </div>
                                        <span class="pull-right" ng-if="fileSpeed">{{fileSpeed}}/s</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="settings">
                        <div class="container" ng-controller="settingsCtrl" data-ng-init="init()">
                            <h3>Einstellungen</h3>
                            <hr>
                            <div class="page">
                                <div class="row">
                                    <div class="col-md-12">
                                        <label for="pathInput">Arma 3 Pfad</label>
                                        <div class="input-group">
                                            <input id="pathInput" class="form-control" type="text" placeholder="Kein Arma Pfad gesetzt" ng-model="ArmaPath" disabled>
                                            <span class="input-group-btn">
                                                <button ng-disabled="downloading" class="btn btn-primary" type="button" ng-click="chooseArmaPath()"><span class="glyphicon glyphicon-open-file"></span></button>
                                            </span>
                                        </div>
                                    </div>
                                </div>
                                <hr>
                                <div class="row">
                                    <div class="col-md-4">
                                        <div class="form-group form-inline">
                                            <label for="splashCheck">Kein Splashscreen</label>
                                            <span class="pull-right">
                                                <input class="icheck" id="splashCheck" type="checkbox">
                                            </span>
                                            <hr>
                                            <label for="introCheck">Intro überspringen</label>
                                            <span class="pull-right">
                                                <input class="icheck" id="introCheck" type="checkbox">
                                            </span>
                                            <hr>
                                            <label for="htCheck">Hyper-Threading</label>
                                            <span class="pull-right">
                                                <input class="icheck" id="htCheck" type="checkbox">
                                            </span>
                                            <hr>
                                            <label for="windowedCheck">Fenstermodus</label>
                                            <span class="pull-right">
                                                <input class="icheck" id="windowedCheck" type="checkbox">
                                            </span>
                                        </div>
                                    </div>
                                    <div class="col-md-8">
                                        <div class="row">
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="memInput">Maximaler RAM</label>
                                                    <input ng-model="mem" ng-change="saveSettings()" id="memInput" class="form-control" type="number">
                                                </div>
                                                <div class="form-group">
                                                    <label for="vmemInput">Maximaler vRam</label>
                                                    <input ng-model="vram" ng-change="saveSettings()" id="vmemInput" class="form-control" type="number">
                                                </div>
                                            </div>
                                            <div class="col-md-6">
                                                <div class="form-group">
                                                    <label for="cpuInput">CPU Anzahl</label>
                                                    <input ng-model="cpu" ng-change="saveSettings()" id="cpuInput" class="form-control" type="number">
                                                </div>
                                                <div class="form-group">
                                                    <label for="threadsInput">Extra Threads</label>
                                                    <input ng-model="thread" ng-change="saveSettings()" id="threadsInput" class="form-control" type="number">
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-12">
                                                <div class="form-group">
                                                    <label for="addInput">Zusätzliche Startparameter</label>
                                                    <input ng-model="add_params" ng-change="saveSettings()" id="addInput" class="form-control" type="text">
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <hr class="margin-none">
                                <div class="row">
                                    <div class="col-md-4">
                                        <form>
                                            <div class="form-group form-inline">
                                                <h5>Theme</h5>
                                                <label for="lightSwitch">Light</label>
                                                <span class="pull-right">
                                                        <input class="icheck" id="lightSwitch" type="radio" name="theme">
                                                </span>
                                                <br>
                                                <label for="darkSwitch">Night</label>
                                                <span class="pull-right">
                                                        <input class="icheck" id="darkSwitch" type="radio" name="theme">
                                                </span>
                                            </div>
                                        </form>
                                    </div>
                                    <div class="col-md-8">
                                        <form>
                                            <div class="form-group form-inline">
                                                <h5>Debug</h5>
                                                <div class="btn-group btn-group-margin" role="group">
                                                    <button class="btn btn-success" ng-disabled="uploadingRPT" type="button" ng-click="uploadRPT()">Letzten RPT hochladen <i class="fa fa-upload" aria-hidden="true"></i></button>
                                                    <button class="btn btn-success" type="button" ng-click="openMPCache()">MPMission Cache öffnen <i class="fa fa-folder-open" aria-hidden="true"></i></button>
                                                    <button class="btn btn-success" type="button" ng-click="startA3Verify()">Arma 3 auf Fehler prüfen <i class="fa fa fa-cogs" aria-hidden="true"></i></button>
                                                </div>
                                            </div>
                                        </form>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="faq">
                        <div class="container">
                            <h3>FAQ</h3>
                            <hr>
                            <div class="page">
                                <div class="panel-group" id="faqAccordion">
                                    <div class="panel panel-default">
                                        <div class="panel-heading accordion-toggle question-toggle collapsed" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question0">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Was ist ein Torrent ?</a>
                                            </h4>
                                        </div>
                                        <div id="question0" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                Torrenting ermöglicht, dass du, während du downloadest, allen anderen
                                                deinen Upload zur Verfügung stellst, um ihren Download zu
                                                erhöhen.<br>
                                                So habt ihr höhere Download Geschwindigkeiten und wir sparen
                                                Serverkosten, win-win oder nicht ?.<br>
                                                <br>
                                                Technische Details des Clients (webtorrent):
                                                <ul>
                                                    <li>
                                                        Torrenting via WebRTC "web-peers" und udp/tcp "bittorent-peers"
                                                    </li>
                                                    <li>
                                                        100% Javascript
                                                    </li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default ">
                                        <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question1">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Du wirst beim Joinen auf den Server gekickt ("Verbindung zur Sitzung abgebrochen"/"Session Lost")</a>
                                            </h4>
                                        </div>
                                        <div id="question1" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                Nutze den Button "Bisign" zum Löschen der .bisign Dateien und Prüfen der Mods.
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default ">
                                        <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question2">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Du wirst beim Joinen auf den Server gekickt wegen "Sie können diese Mission nicht spielen..."</a>
                                            </h4>
                                        </div>
                                        <div id="question2" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                <ul>
                                                    <li>Gehe 100% sicher, dass die ReallifeRPG-Mods geladen werden, dies ist sichtbar am ReallifeRPG-Logo im Hauptmenü.</li>
                                                    <li>Fehler hierbei können unter anderem durch mehrere Arma Installationen entstehen. Der ReallifeRPG Launcher startet die Arma Installation, die im Pfad ausgewählt ist und nicht die, die Steam möglicherweise verwendet!</li>
                                                    <li>Melde dich im Support, falls du das Problem nicht selber behben kannst. Dort wird dir immer geholfen :)</li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question3">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Das Verbinden zum Torrent dauert sehr lange - was ist falsch ?</a>
                                            </h4>
                                        </div>
                                        <div id="question3" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                Beim Verbinden zum Torrent müssen erst alle vorhandenen Dateien
                                                geprüft werden.<br>
                                                Das Verbinden zum Torrent dauert deshalb abhängig von deiner
                                                CPU/SSD/HDD 5-10 Minuten.<br>
                                                Warte bitte bis zu 15 Minuten, bis du dich im Support meldest.<br>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question4">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Wie kann ich euch durch seeden unterstützen ?</a>
                                            </h4>
                                        </div>
                                        <div id="question4" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                Sobald du den Mod heruntergelanden hast, kannst du mit dem Button "Seeden" das Seeding starten. Danke! <3<br>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="panel panel-default">
                                        <div class="panel-heading accordion-toggle collapsed question-toggle" data-toggle="collapse" data-parent="#faqAccordion" data-target="#question5">
                                            <h4 class="panel-title">
                                                <a href="#" class="ing">Ein Bug im Launcher! Was nun ?</a>
                                            </h4>
                                        </div>
                                        <div id="question5" class="panel-collapse collapse" style="height: 0;">
                                            <div class="panel-body">
                                                Alle Bugs ingame bitte nur im <a href="https://forum.realliferpg.de/wpbt/">Bugtracker</a>
                                                <br>
                                                <br>
                                                Melde dich im Support, falls der Bug deinen Download verhindert.
                                                <br>
                                                Ansonsten melde bitte deinen Bug im Launcher via
                                                <ul>
                                                    <li><a href="https://forum.realliferpg.de/wpbt/product/2-infopanel/">Bugtracker</a></li>
                                                    <li><a href="https://github.com/A3ReallifeRPG/RealLifeRPGLauncher/issues">Github</a></li>
                                                    <li><a href="mailto:NotKaibu@gmail.com">Per Mail an NotKaibu@gmail.com</a></li>
                                                </ul>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="twitch">
                        <div class="container" ng-controller="twitchCtrl" data-ng-init="init()">
                            <h3>Twitch</h3>
                            <hr>
                            <div class="page" style="position: relative;" id="twitchScroll">
                                <div ng-if="twitchers.length === 0">
                                    <h1 class="center">Keiner Online ¯\_(ツ)_/¯</h1>
                                    <br>
                                    <br>
                                    <div class="row">
                                        <div class="col-md-2">
                                        </div>
                                        <div class="col-md-8">
                                            <div class="panel panel-primary">
                                                <div class="panel panel-heading panel-head-nomargin center">
                                                    Du streamst auf unserem Server und dir gefällts hier ?
                                                </div>
                                                <div class="panel panel-body center">
                                                    Egal ob groß, ob klein kannst du dich jederzeit im Support melden um von uns gelistet zu werden.
                                                </div>
                                            </div>
                                        </div>
                                        <div class="col-md-2">
                                        </div>
                                    </div>
                                </div>
                                <div class="row">
                                    <div class="col-md-4" ng-repeat="twitch in twitchers">
                                        <div class="panel panel-primary">
                                            <div class="panel panel-heading panel-head-nomargin">
                                                <a class="white" href="{{twitch.url}}" target="_blank">{{twitch.sliced}} <span ng-if="twitch.status.length > 25">... </span></a> <a class="white" href="{{twitch.url}}" target="_blank"><span class="pull-right label label-success">{{twitch.display_name}} <i class="fa fa-twitch" aria-hidden="true"></i></span></a>
                                            </div>
                                            <div class="panel panel-body center">
                                                <a class="white" href="{{twitch.url}}" target="_blank"><img ng-src="{{twitch.preview_large}}" height="187" width="333"></a>
                                                <hr>
                                                <a class="white" href="{{twitch.url}}" target="_blank"><span class="label label-info label-large">{{twitch.average_fps}}FPS@{{twitch.video_height}}p für {{twitch.viewers}} Zuschauer mit {{twitch.delay}}s. Verzögerung</span></a>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="map">
                        <div class="container" ng-controller="mapCtrl" data-ng-init="init()">
                            <h3>Map</h3>
                            <hr>
                            <div class="page">
                                <div id="leaflet_map" style="width: 1140px; height: 510px"></div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="item">
                    <div id="about">
                        <div class="container" ng-controller="aboutCtrl" data-ng-init="init()">
                            <h3>Über</h3>
                            <hr>
                            <div class="page" style="position: relative;" id="aboutScroll">
                                <div class="row">
                                    <div class="col-md-12" ng-bind-html="aboutContent">

                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
  $(document).on('click', 'a[href^="http"]', function(event) {
    event.preventDefault();
    shell.openExternal(this.href);
  })

  $(document).ready(() => {
    $('.icheck').iCheck({
      checkboxClass: 'icheckbox_minimal',
      radioClass: 'iradio_minimal',
      increaseArea: '20%'
    })
  })

  $(window).load(() => {
    helpers.appLoaded()
  })
</script>
</body>
</html>
